<template>
    <div class="management">
        <h2 class="my-big-font">全部商品</h2>
        <div class="management-module">
            <span @click="searchManagementData(1)" class="module1" :class="{active : state==1?true:false}">出售中的商品</span>
            <span @click="searchManagementData(2)" class="module2" :class="{active : state==2?true:false}">待上架的商品</span>
            <span @click="searchManagementData(0)" class="module3" :class="{active : state==0?true:false}">已下架的商品</span>
        </div>
        <div class="management-search">
            <div class="search-l">
                <span class="search-class1">商品分类</span>
                <el-select v-model="searchValue" @change="getbrandOptions" placeholder="全部" clearable>
                    <el-option v-for="item in searchOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
                <span class="search-class2">商品名称</span>
                <input class="search-input" type="text" v-model="searchInput">
                <span class="search-class2">品牌</span>
                <el-select v-model="brandValue" placeholder="请选择品牌" clearable>
                    <el-option v-for="item in brandOptions"  :key="item.id"  :label="item.name"  :value="item.name"></el-option>
                </el-select>
                <span class="search-btn my-btn" @click="searchManagementData(state)">搜索</span>
            </div>
            <div class="search-r">
                <span @click="publishClick">发布商品</span>
            </div>
        </div>
        <div class="tableOne" v-show="state==1">
            <table style="width: 100%;margin-top:20px;">
                <tr class="titleTr">
                    <td min-width='120px'>产品编号</td>
                    <td>品牌</td>
                    <td>产品名称</td>
                    <td>分类</td>
                    <td>规格</td>
                    <td>原价</td>
                    <td>供货价</td>
                    <td>安卓现价</td>
                    <td>苹果现价</td>
                    <td>保护价</td>
                    <td>上架时间</td>
                    <td>总销量</td>
                    <td>操作</td>
                </tr>
                <tr v-for="p,i of managementData" :key="i">
                    <td>{{p.goodsId}}</td>
                    <td>{{p.pname}}</td>
                    <td>{{p.name}}</td>
                    <td>{{p.categoryName}}</td>
                    <td>{{p.specsName}}</td>
                    <td>{{p.originalCost}}</td>
                    <td>{{p.supplyCost}}</td>
                    <td>{{p.goodsparvalue}}</td>
                    <td>{{p.apGoodsparvalue}}</td>
                    <td>{{p.protectCost}}</td>
                    <td>{{format(p.groundTime)}}</td>
                    <td>{{p.totalSales}}</td>
                    <td v-if="p.goodsId" style="color:rgba(107, 90, 253, 1);" @click="offShelf(p.id)">下架</td>
                </tr>
            </table>
        </div>
        <div class="tableOne" v-show="state==2">
            <table style="width: 100%;margin-top:20px;">
                <tr class="titleTr">
                    <td min-width='120px'>产品编号</td>
                    <td>品牌</td>
                    <td>产品名称</td>
                    <td>分类</td>
                    <td>规格</td>
                    <td>原价</td>
                    <td>供货价</td>
                    <td>安卓现价</td>
                    <td>苹果现价</td>
                    <td>保护价</td>
                    <td>上架时间</td>
                    <td>总销量</td>
                    <td>操作</td>
                </tr>
                <tr v-for="p,i of managementData" :key="i">
                    <td>{{p.goodsId}}</td>
                    <td>{{p.pname}}</td>
                    <td>{{p.name}}</td>
                    <td>{{p.categoryName}}</td>
                    <td>{{p.specsName}}</td>
                    <td>{{p.originalCost}}</td>
                    <td>{{p.supplyCost}}</td>
                    <td>{{p.goodsparvalue}}</td>
                    <td>{{p.apGoodsparvalue}}</td>
                    <td>{{p.protectCost}}</td>
                    <td>{{format(p.groundTime)}}</td>
                    <td>{{p.totalSales}}</td>
                    <td v-if="p.goodsId" style="color:rgba(107, 90, 253, 1);" @click="goEdit1(p.id)">编辑</td>
                </tr>
            </table>
        </div>
        <div class="tableOne" v-show="state==0">
            <table style="width: 100%;margin-top:20px;">
                <tr class="titleTr">
                    <td min-width='120px'>产品编号</td>
                    <td>品牌</td>
                    <td>产品名称</td>
                    <td>分类</td>
                    <td>规格</td>
                    <td>原价</td>
                    <td>供货价</td>
                    <td>安卓现价</td>
                    <td>苹果现价</td>
                    <td>保护价</td>
                    <td>创建时间</td>
                    <td>下架时间</td>
                    <td>总销量</td>
                    <td>操作</td>
                </tr>
                <tr v-for="p,i of managementData" :key="i">
                    <td>{{p.goodsId}}</td>
                    <td>{{p.pname}}</td>
                    <td>{{p.name}}</td>
                    <td>{{p.categoryName}}</td>
                    <td>{{p.specsName}}</td>
                    <td>{{p.originalCost}}</td>
                    <td>{{p.supplyCost}}</td>
                    <td>{{p.goodsparvalue}}</td>
                    <td>{{p.apGoodsparvalue}}</td>
                    <td>{{p.protectCost}}</td>
                    <td>{{format(p.createTime)}}</td>
                    <td>{{format(p.underTime)}}</td>
                    <td>{{p.totalSales}}</td>
                    <td v-if="p.goodsId" style="color:rgba(107, 90, 253, 1);" @click="goEdit2(p.id)">编辑</td>
                </tr>
            </table>
            
        </div>
        <div class="table-bottom">
            <span></span>
            <span>第{{currentPage}}页，共{{pageCount}}页</span>
        </div>
        <el-pagination @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return{
            uid:'',
            state:'',
            searchValue:"",//商品分类选择框值
            searchOptions:[
                {
                    id: '',
                    name: ''
                }
            ],
            searchInput:'',
            brandOptions:'',
            brandValue:'',
            // 出售中商品数据
            managementData:[
               {
                  id:'',
                  goodsId: '',
                  pname:'',
                  name:'',
                  categoryName:'',
                  specsName:'',
                  originalCost:'',
                  supplyCost:'',
                  goodsparvalue:'',
                  apGoodsparvalue:'',
                  protectCost:'',
                  groundTime:'',
                  createTime:'',
                  underTime:'',
                  totalSales:'',
                }
            ],
            // 分页
            pageNum:6,//每页6条
            pageCount:null,//一共几页
            currentPage:'',//当前页码
        }
    },
    mounted(){
        this.uid= sessionStorage.getItem('uid')
        this.currentPage=1
        this.state=1
        this.getManagementData(1)
        this.getsearchOptions()
        this.getbrandOptions()
    },
    methods:{
         //获取品牌分类数据
        getbrandOptions(){
          this.brandValue=''
            this.axios.post('/recharge/sys/vipshop/pnameList?&categoryId='+this.searchValue).then(res=>{
                this.brandOptions=res.data.data
            })
        },
        //页码改变触发函数
        handleCurrentChange(page) {
            this.currentPage=page
            this.getManagementData(this.state)
        },
        searchManagementData(n){
            this.currentPage=1
            this.getManagementData(n)
        },
        //获取商品数据
        getManagementData(n){
            this.state=n
            this.axios.post('/recharge/sys/vipshop/list?limit='+this.pageNum+'&page='+this.currentPage
                +'&state='+this.state+'&categoryId='+this.searchValue+'&name='+this.searchInput+'&pname='+this.brandValue).then(result=>{
              this.managementData=result.data.data;
              this.pageCount = Math.ceil(result.data.count/this.pageNum);
            })
        },
        //获取选择商品分类数据
        getsearchOptions(){
            this.axios.post('/recharge/sys/category/list').then(res=>{
                this.searchOptions=res.data.data
            })
        },
        //发布商品
        publishClick(){
          this.$router.push('/index/publish')
        },
        // 下架
        offShelf(id){
            this.axios.post('/recharge/sys/vipshop/updateById?id='+id+'&state='+0+'&userid='+this.uid).then(res=>{
                //刷新本页面、或刷新列表
                this.getManagementData(1)
            })
        },
        //跳转至待上架编辑页
        goEdit1(id){
            this.$router.push({path:"/index/commodityEdit",query:{id:id,uid:this.uid}})
        },
        //跳转至下架编辑页
        goEdit2(id){
            this.$router.push({path:"/index/commodityEdit2",query:{id:id,uid:this.uid}})
        },
        //处理时间戳
        format(shijianchuo) {
            if(shijianchuo){
                var time = new Date(parseInt(shijianchuo)*1000);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var f = time.getMinutes();
                var s = time.getSeconds();
                //想要什么格式可以自己改
                // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
                return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            }
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
      managementData(){
        var mm=this.managementData.length
        if(mm<this.pageNum){
          for(var n=0;n<this.pageNum-mm;n++){
            this.managementData.push({'bh':'  '})
          }
        }
      }
    }
}
</script>

<style scoped>
.table-bottom{
    display: flex;
    justify-content: space-between;
    color: #444;
    font-size: 14px;
    margin-top: 15px;
}
.management{
    padding: 30px 82px 90px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height:calc(100vh - 96px);
    position: relative;
}
.management h2{
    padding-top: 0;
}
/* 选项卡 */
.management-module span{
    padding: 15px 0;
    display: inline-block;
    margin-right: 60px;
    border-bottom: 3px solid #fff;
    transition: .3s;
}
.management-module .active{
    border-bottom: 3px solid rgb(255, 120, 42);
}
/* 搜索框 */
.management-search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
/* 左侧 */
.search-l>span{
    padding-right: 10px;
}
.search-l .search-class2{
    margin-left: 2.5vw;
}
/* 选择框宽 */
.el-select{
    max-width: 170px;
}
/* 搜索框 */
.search-input{
    height: 35px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding-left: 10px;
}
.search-btn{
    margin-left: 15px;
    width: 70px;
    height: 33px;
    line-height: 33px;
    padding: 0!important;
    font-size: 15px;
    border: 0;
}
/* 右侧 */
.search-r span{
    display: inline-block;
    border: 2.5px solid rgba(255, 218, 59, 1);
    width: 110px;
    height: 31px;
    line-height: 26px;
    text-align: center;
    font-size: 15px;
    border-radius: 3px;
}
/* 表格 */
/* 表格1 */
table{
    min-height: 340px;
}
table .titleTr{
    background:rgba(246, 246, 246, 1);
}
table tr{
    border: .5px solid #eee;
    /* min-height: 80px!important; */
}
table td{
    padding: 10px 5px;
    text-align: center;
    min-width: 60px;
    color: #555;
    font-size: 15px;
    /* min-height: 80px!important; */

}
</style>
<style>
.el-input__inner{
    height: 35px!important;
}
/* 分页 */
.el-pagination{
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%);
}
</style>